<template>
  <button :class="mode === 'move' ? 'is-active': ''" @click="mode = 'move'">
    Move
  </button>
  <button :class="mode === 'select' ? 'is-active': ''" @click="mode = 'select'">
    Select
  </button>
  <diagram ref="diagram" :model="model" height="400" />
</template>

<script>
import { Diagram } from "vue-diagrams";

export default {
  components: {
    Diagram,
  },
  data() {
    const diagramModel = new Diagram.Model();

    const node1 = diagramModel.addNode("test2", 300, 200);
    const inPort = node1.addInPort("test");

    const node2 = diagramModel.addNode("test", 10, 300, 144, 80);
    const node2OutPort = node2.addOutPort("testOut");
    node2.addOutPort("testOut2");
    node2.color = "#00cc66";

    const node3 = diagramModel.addNode("test3", 10, 100, 72, 100);
    const node3OutPort = node3.addOutPort("testOut3");
    node3.color = "#cc6600";
    node3.deletable = false;

    diagramModel.addLink(node2OutPort, inPort);
    diagramModel.addLink(node3OutPort, inPort);

    return {
      model: diagramModel,
      diagram: undefined,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.diagram = this.$refs.diagram;
    });
  },
  computed: {
    mode: {
      get() {
        return this.diagram ? this.diagram.mode : undefined;
      },
      set(v) {
        if(this.diagram)
          this.diagram.mode = v;
      }
    },
  },
};

</script>
<style scoped>
  button {
    color: blue;
    cursor: pointer;
    text-decoration: underline;
  }
  button.is-active {
    font-weight: bold;
  }
</style>
